<template>
  <main-page>
    <div slot="body">
      <el-form :inline="true" :model="search" size="mini">
        <el-form-item>
          <el-select v-model="search.dataKey" style="width:100%" placeholder="类型" clearable>
            <el-option :key="config.banner.advertise" label="首页广告" :value="config.banner.advertise"></el-option>
            <el-option
              :key="config.banner.read_advertise"
              label="阅读底部单图"
              :value="config.banner.read_advertise"
            ></el-option>
            <el-option
              :key="config.banner.txt_read_advertise"
              label="阅读底部文字链"
              :value="config.banner.txt_read_advertise"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="search.advLoadType" style="width:100%" placeholder="加载方式" clearable>
            <el-option :key="1" label="直链方式" :value="1"></el-option>
            <el-option :key="2" label="JS方式" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getAdvertiseList">搜索</el-button>
          <el-button type="danger" @click="dialogFormVisible = true;">新增</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" style="width: 100%" tooltip-effect="dark">
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.dataKey == config.banner.advertise">首页广告</el-tag>
            <el-tag v-else-if="scope.row.dataKey == config.banner.read_advertise">阅读底部单图</el-tag>
            <el-tag v-else-if="scope.row.dataKey == config.banner.txt_read_advertise">阅读底部文字链</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="advName" label="banner名称"></el-table-column>
        <el-table-column prop="advDescription" label="描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="weight" label="权重">
          <template slot-scope="scope">
            <el-popover
              placement="top"
              trigger="click"
              title="权重"
              @show="$base.set2Form(popover, scope.row)"
              @after-leave="$base.clearObj(popover)"
            >
              <el-input v-model="popover.weight"></el-input>
              <div style="text-align: right; margin: 5px 0 0 0">
                <el-button type="primary" size="mini" @click="updateRowById(scope.row.id)">确定</el-button>
              </div>
              <a href="javascript:;" slot="reference">{{ scope.row.weight }}</a>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="加载方式">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.advLoadType == 1">直链</el-tag>
            <el-tag v-else-if="scope.row.advLoadType == 2">JS</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="加载位置">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.canInSite == 1">站内链接</el-tag>
            <el-tag v-else-if="scope.row.canInSite == 2">站外链接</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="target" label="跳转方式">
          <template slot-scope="scope">
            <el-tag>{{scope.row.target}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="图片显示">
          <template slot-scope="scope">
            <a :href="scope.row.advUrl"  target="_blank">
              <el-image style="width: 120px;" :src="scope.row.imgUrl" fit="contain"></el-image>
            </a>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              title="编辑"
              size="small"
              @click="handleClick2EditById(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              title="删除"
              size="small"
              @click="handleClick2DeleteById(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination :listNum="listNum" @currentChange="handleCurrentChange"></pagination>

      <el-dialog title="Banner管理" :visible.sync="dialogFormVisible" width="40%">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="demo-ruleForm">
          <el-form-item label="类型" prop="dataKey">
            <el-radio-group v-model="form.dataKey">
              <el-radio :label="config.banner.advertise">首页广告</el-radio>
              <el-radio :label="config.banner.read_advertise">阅读底部单图</el-radio>
              <el-radio :label="config.banner.txt_read_advertise">阅读底部文字链</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="名称" prop="advName">
            <el-input v-model="form.advName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="advDescription">
            <el-input type="textarea" v-model="form.advDescription" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="权重" prop="weight">
            <el-input-number v-model="form.weight" :min="1" :max="10"></el-input-number>
          </el-form-item>
          <el-form-item label="加载方式" prop="advLoadType">
            <el-select v-model="form.advLoadType" style="width:100%" placeholder="加载方式">
              <el-option :key="1" label="直链方式" :value="1"></el-option>
              <el-option :key="2" label="JS方式" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="加载位置" prop="canInSite">
            <el-select v-model="form.canInSite" style="width:100%" placeholder="是否站内">
              <el-option :key="1" label="站内" :value="1"></el-option>
              <el-option :key="2" label="站外" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="跳转方式" prop="target">
            <el-radio-group v-model="form.target">
              <el-radio label="_blank">_blank</el-radio>
              <el-radio label="_self">_self</el-radio>
              <el-radio label="_parent">_parent</el-radio>
              <el-radio label="_top">_top</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="跳转地址" prop="advUrl">
            <el-input v-model="form.advUrl" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图片上传" prop="imgUrl">
            <!-- list-type="picture-card" -->
            <el-upload
              class="avatar-uploader"
              :action="rootApi"
              :on-remove="handleRemove"
              :on-success="handleAvatarSuccess"
              :before-upload="handleBeforeUpload"
              :limit="1"
            >
              <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" />
              <i class="el-icon-plus avatar-uploader-icon" v-else></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="onFormSubmit">提交</el-button>
        </div>
      </el-dialog>
    </div>
  </main-page>
</template>

<script>
import { config } from "assets/js/Data";

import { deleteFileByUrl } from "api/FileApi";

import {
  getAdvertiseList,
  saveAdvertise,
  deleteAdvertise,
  updateAdvertiseById
} from "api/AdvertiseApi";

export default {
  name: "BannerList",
  data() {
    return {
      rootApi: process.env.VUE_APP_UPLOAD_URL,
      search: {
        currentIndex: 1,
        parentDataKey: "1.1.2",
        dataKey: "",
        advLoadType: "",
        canInSite: ""
      },
      tableData: [],
      listNum: 1,
      config: config,
      form: {
        id: "",
        advName: "",
        advDescription: "",
        dataKey: "",
        advLoadType: 1,
        advUrl: "",
        canInSite: 1,
        imgUrl: "",
        target: "_self",
        weight: 1
      },
      rules: {
        advName: [{required: true, message: "请输入名称"}],
        dataKey: [{required: true, message: "请选择类型"}],
        weight: [{required: true, message: "请输入权重"}],
        canInSite: [{required: true, message: "请选择加载位置"}],
        advLoadType: [{required: true, message: "请选择加载方式"}],
        target: [{required: true, message: "请选择跳转方式"}],
        advUrl: [{required: true, message: "请输入跳转地址"}]
      },
      dialogFormVisible: false,
      popover: {
        id: "",
        weight: 1
      }
    };
  },
  methods: {
    getAdvertiseList() {
      getAdvertiseList(this.search).then(res => {
        this.tableData = res.datas;
        this.listNum = res.pagination.totalCount;
      });
    },
    handleCurrentChange(page) {
      this.search.currentIndex = page;
      this.getAdvertiseList();
    },
    handleClick2EditById(row) {
      this.dialogFormVisible = true;
      this.$base.set2Form(this.form, row);
    },
    handleClick2DeleteById(id) {
      this.$base.deleteConfirm(() => {
        deleteAdvertise({ id }).then(res => {
          if (res) {
            this.$base.deleteOk();
            this.getAdvertiseList();
          }
        });
      });
    },
    onFormSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.id) {
            //修改
            updateAdvertiseById(this.form).then(res => {
              if (res) {
                this.$base.showOk();
                this.dialogFormVisible = false;
                this.getAdvertiseList();
              }
            });
          } else {
            //保存
            saveAdvertise(this.form).then(res => {
              if (res) {
                this.$base.showOk();
                this.dialogFormVisible = false;
                this.getAdvertiseList();
              }
            });
          }
        }
      });
    },
    updateRowById (id) {
      this.popover.id = id
      updateAdvertiseById(this.popover).then(res => {
        if (res) {
          this.$base.showOk();
          this.getAdvertiseList();
        }
      });
    },
    handleRemove(file, fileList) {
      this.deleteFileByUrl();
    },
    deleteFileByUrl() {
      deleteFileByUrl({
        key: this.form.imgUrl,
        module: config.module.UTILS
      }).then(res => {
        if (res) {
        }
      });
    },
    handleAvatarSuccess(res, file) {
      if (res.meta.success) {
        this.form.imgUrl = res.data[0];
      }
    },
    handleBeforeUpload(file) {
      this.deleteFileByUrl();
    }
  },
  created() {
    this.getAdvertiseList();
  },
  watch: {
    dialogFormVisible(newDialogFormVisible) {
      if (!newDialogFormVisible) {
        this.$base.clearObj(this.form);
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.avatar-uploader {
  .avatar {
    width: auto;
    height 80px
  }
}
</style>